<template>
  <div class="inden-manage">
    <div class="text-center pt-4">
      <el-radio-group v-model="radioVal">
        <el-radio-button
          :label="item.name"
          v-for="(item, index) in tabsList"
          :key="index"
          class="px-1"
          >{{ item.label }}</el-radio-button
        >
      </el-radio-group>
    </div>
    <component :is="components[radioVal]" />
    <!-- <div class="app-container inden-manage"></div> -->
  </div>
</template>
<script setup name="IndenManage">
import { reactive, toRefs, ref } from 'vue'
import { useRouter } from 'vue-router'
import SalesOrder from './salesOrder/index'
const router = useRouter()
const { proxy } = getCurrentInstance()
const { credit_rating } = proxy.useDict('credit_rating')
const components = shallowRef({
  SalesOrder
})
const data = reactive({
  radioVal: 'SalesOrder',
  tabsList: [
    {
      label: '销售订单',
      name: 'SalesOrder'
    },
    {
      label: '采购订单',
      name: 'PurchaseOrder' //PurchaseOrder
    },
    {
      label: '内部订单',
      name: 'InnerOrders' //Internalorders
    }
  ]
})
const { radioVal, tabsList } = toRefs(data)
</script>
<style scoped>
.inden-manage:deep(.el-radio-button__inner) {
  border-radius: 50px;
}
</style>
